<template>
<div>
    <van-nav-bar title="代申请加班" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
        <div class="heightF">
            <van-cell-group>
                <van-cell title="代申请人员" v-model=" dsquserName" :value=this.dsquserName is-link to="selectpeop" />
            </van-cell-group>
            <van-cell-group>
                <van-field name="starttime" v-model="starttime" clearable label="开始时间" input-align="right" placeholder="请输入开始时间" @focus="start" />
                <!-- 开始时间控件 -->
                <van-popup v-model="show" position="bottom">
                    <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
                </van-popup>
            </van-cell-group>

            <van-cell-group>
                <van-field name="endtime" v-model="endtime" clearable label="结束时间" input-align="right" placeholder="请输入结束时间" @focus="end" />
                <!-- 结束时间控件 -->
                <van-popup v-model="show1" position="bottom">
                    <van-datetime-picker v-model="currentDate1" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
                </van-popup>
            </van-cell-group>

            <van-cell-group>
                <!-- <van-field v-model="hour" type="number" input-align="right" label="时长" /> -->
                <van-field v-model="hour" name="hour" autosize label="时长" input-align="right" />

            </van-cell-group>

            <!-- <div class="group-leader flexbox">
                <van-field readonly name="isLeaveGZ" clickable label="是否离开广州" :value="value3" input-align="right" placeholder="是否离开广州" @click="mqinAi3" />
                <div v-if="myIf3">
                    <van-popup v-model="showPicker1" position="bottom">
                        <van-picker title="请选是否离开广州" show-toolbar :columns="columns3" @cancel="showPicker = false" @confirm="onConfirm3" />
                    </van-popup>
                </div>
            </div> -->

            <!-- <van-field v-model="reson" label="请假原因" placeholder="请输入请假原因" input-align="right" /> -->

            <van-field v-model="reson" rows="3" autosize label="加班原因" type="textarea" input-align="right" placeholder="请输入请假原因" />
        </div>

        <!-- <van-field v-model="reson" label="加班原因" placeholder="请输入加班原因" input-align="right" /> -->

        <div>

            <van-row>
                <van-col span="8">
                    <van-button type="primary" block @click="handleSumbit('insertDraft')">暂存</van-button>
                </van-col>
                <van-col span="8">
                    <van-button type="info" block @click="handleSumbit('insert')">提交</van-button>
                </van-col>
                <van-col span="8">
                    <van-button type="warning" block @click="browserPdf('WORK_OVERTIME')">制度查询</van-button>
                </van-col>
            </van-row>
        </div>
    </van-form>
</div>
</template>

<script>
import Cookies from "js-cookie";
import {
    parseTime
} from "@/utils";
import {
    Dialog
} from "vant";
import {
    getDay,
    Transformation,
    browserPdf
} from "@/api/common";
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {

            myIf1: false,
            myIf2: false,
            myIf3: false,
            reson: "",
            value1: "",
            value2: "",
            value3: "",
            hour: "",
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            columns1: ["上午", "下午"],
            columns2: ["上午", "下午"],
            columns3: ["不离开", "离开"],
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021, 12, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳
            Total: "",
            dsquserName: ''
        };
    },
    created() {
        this.applyTime = this.currentDate.getFullYear() +
            "年" +
            (Number(this.currentDate.getMonth()) + 1) +
            "月" +
            this.currentDate.getDate() +
            "日 " +
            this.currentDate.getHours() +
            ":" +
            this.currentDate.getMinutes();
        // this.applyTime = new Date(this.currentDate).getTime() / 1000;

        this.dsquserName = sessionStorage.getItem("userName")
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1); //返回上一层
            sessionStorage.removeItem('userId')
            sessionStorage.removeItem('userName')
        },
        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        transformRequest(data) {
            data = JSON.stringify(data)
            return data
        },
        handleSumbit(type) {

            const ddd = {
                recordType: "WORK_OVERTIME",
                planStartTime: parseTime(this.starttime, '{y}-{m}-{d} {h}:{i}:{s}'),
                planEndTime: parseTime(this.endtime, '{y}-{m}-{d} {h}:{i}:{s}'),
                otHours: this.hour,
                reason: this.reson,
                isLeaveGz: this.value3 == "不离开" ? 0 : 1,
                userId: sessionStorage.getItem("userId"),
                userName: this.dsquserName,
                agentUserId: Cookies.get("userId")
            };

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'checkApi/workVerification',
                data: this.zhuanfunction(ddd)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    const obj = {
                        recordType: "WORK_OVERTIME",
                        planStartTime: this.starttime + ":00",
                        planEndTime: this.endtime + ":00",
                        otHours: this.hour,
                        reason: this.reson,
                        isLeaveGz: this.value3 == "不离开" ? 0 : 1,
                        userId: sessionStorage.getItem("userId"),
                        userName: this.dsquserName,
                        agentUserId: Cookies.get("userId"),
                        workOvertimeDetailList: ''
                    };
                    const arr = [{
                        sumTime: this.hour,
                        startTime: this.starttime + ":00",
                        endTime: this.endtime + ":00",
                        id: "",
                        recordId: ""
                    }]
                    obj.workOvertimeDetailList = arr
                    this.$axios({
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8"
                        },
                        method: 'post',
                        url: 'workOverTimeApply/' + type,
                        data: this.transformRequest(obj)
                    }).then((response) => { //这里使用了ES6的语法
                        console.log(response) //请求成功返回的数据
                        if (response.data.code == '200') {
                            Dialog.alert({
                                title: "成功",
                                message: response.data.msg

                            }).then(() => {
                                this.$router.go(-1); //返回上一层
                            });
                            sessionStorage.removeItem('userId')
                            sessionStorage.removeItem('userName')
                        } else {
                            Dialog.alert({
                                title: "错误",
                                message: response.data.msg
                            }).then(() => {
                                this.$router.go(-1); //返回上一层
                            });
                        }
                    })
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        if (response.data.code == '50000') {
                            this.$router.go(-1);
                        } else {
                            this.$router.push({
                                path: "/"
                            });
                        }

                    });
                }
            })

        },
        browserPdf(id) {
            browserPdf(id);
        },
        onConfirm1(e) {
            this.value1 = e
            this.showPicker = false
        },
        onConfirm2(e) {
            this.value2 = e
            this.showPicker = false
        },
        onConfirm3(e) {
            this.value3 = e
            this.showPicker1 = false
        },
        mqinAi1() {
            this.myIf1 = true
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi2() {
            this.myIf1 = false
            this.myIf2 = true
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi3() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = true
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker1 = true
        },
        mqinAi4() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = true
            this.myIf5 = false

            this.showPicker2 = true
        },

        mqinAi5() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = true
            this.showPicker = true
        },

        onSubmit(values) {
            console.log('submit', values);
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate() +
                " " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        getHours() {
            const ddd = {
                startTime: parseTime(this.starttime + ":00", '{y}-{m}-{d} {h}:{i}:{s}'),
                endTime: parseTime(this.endtime + ":00", '{y}-{m}-{d} {h}:{i}:{s}'),
            };

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'checkApi/getOtHours',
                data: this.zhuanfunction(ddd)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                this.sumTime = response.data.data.result
                this.hour = response.data.data.result
                // alert(response.data.data.result)
            })
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate() +
                " " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
            this.getHours()
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    },
};
</script>

<style>
.heightF{
    height: calc(100vh - 90px);
    overflow-y: scroll;
}
</style >
